<template>
  <div id="box">
    <div id="m">
      <span id="m1">矩阵1:</span>
      <span id="m2">矩阵2：</span>
      <slot name="format"></slot>
    </div>
    <div id="total">
      <textarea id="matrix1" v-model="matrix1">
    </textarea>
      <textarea id="matrix2" v-model="matrix2">
    </textarea>
      <span><el-button @click="calculate">点击计算</el-button></span>
    </div>
    <div id="result" v-html="result">
    </div>
    <mr ref="tip"></mr>
  </div>
</template>

<script>
import mr from './MessageResult'
export default {
  name: 'ThreeMatrixs',
  props: ['type'],
  components: {mr},
  data () {
    return {
      matrix1: '',
      matrix2: '',
      result: '结果'
    }
  },
  methods: {
    calculate () {
      var value1 = this.matrix1
      var value2 = this.matrix2
      var that = this
      this.axios({
        url: 'http://localhost:8080/linearAlgebra/' + this.type,
        method: 'post',
        data: {
          one: value1,
          two: value2
        }})
        .then(function (response) {
          if (response.data.length === 0) {
            that.$refs.tip.open_fail('参数不合法，请重新输入！！')
          } else {
            that.result = ''
            // 返回值数组不为空就证明返回的是二维矩阵
            if (response.data.array.length !== 0) {
              for (var i = 0; i < response.data.array.length; i++) {
                var change = response.data.array[i].toString().replaceAll(',', ' ')
                that.result += change + '<br/>'
              }
            }
          }
        }, function () {
          that.$refs.tip.open_fail('参数不合法，请重新输入！！')
        })
    }
  }
}
</script>

<style scoped>
  #box{
    margin-top: 30px;
  }
  #total{
    width: 100%;
    height: 230px;
  }
  #m{
    height: 40px;
  }
  #matrix1{
    /*display: inline-block;  !*转为行内块儿 *!*/
    border: 1px solid #409EFF;
    border-radius: 2px;
    margin-left: 8%;
    height: 130px;
    width: 25%;
    text-align:center;
    padding-top: 50px;
    font-size:20px;
    letter-spacing: 3px;
    color:#F56C6C;
  }
  #matrix2{
    /*display: inline-block;  !*转为行内块儿 *!*/
    border: 1px solid #409EFF;
    border-radius: 2px;
    margin-left: 13%;
    text-align:center;
    height: 130px;
    padding-top: 50px;
    width: 25%;
    font-size:20px;
    letter-spacing: 3px;
    color:#F56C6C;
  }

  #result{
    border: 1px solid #409EFF;
    border-radius: 2px;
    margin-top: 50px;
    margin-left: 30%;
    margin-bottom: 30px;
    text-align:center;
    height: 130px;
    padding-top: 20px;
    width: 25%;
    font-size:20px;
    letter-spacing: 3px;
    color:#F56C6C;
  }
  #m1{
    margin-left: 8%;
    color: #67C23A;;
  }
  #m2{
    margin-left: 33%;
    color: #67C23A;;
  }
  h5{
    float: left;
  }
  .el-button{
    /*float: right;*/
    margin-left: 8%;
  }
</style>
